<template>
    <div>
        <div class="ctrls">
            <a-button type="link" @click="ctEditVisible=true"><edit-outlined />编辑</a-button>
        </div>
        <div class="content" style="width:60%;margin:0;" v-html="citangContent"></div>       

        <a-drawer  placement="right" width="50%" class="edit-drawer" :visible="ctEditVisible" :closable="false" @close="closeDrawer">
            <template #title>编辑祠堂</template>
            <div class="ctrls">
                <a-button style="margin-right: 8px" @click="closeDrawer">取消</a-button>
                <a-button type="primary" @click="updateContent">提交</a-button>
            </div>
            <vue3-tinymce v-model="eCtContent" :setting="edSetting" />
        </a-drawer>
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
import { EditOutlined,DeleteOutlined,QuestionCircleOutlined } from '@ant-design/icons-vue';
import Http from '@/until/http';
import { messageTips } from '@/until/tools';
import Vue3Tinymce from '@jsdawn/vue3-tinymce';

export default defineComponent({
    components:{EditOutlined,DeleteOutlined,QuestionCircleOutlined,Vue3Tinymce},
    setup(){        

        const state = reactive({
            activeKey:'1',
            citangContent:'',
            eCtContent:'',
            ctEditVisible:false,
        })

        

        const edSetting = reactive({
            menubar: false,
            height: '600',
            toolbar:
            "bold italic underline h1 h2 blockquote codesample numlist bullist link image | removeformat fullscreen",
            plugins: "codesample link image table lists fullscreen",
            toolbar_mode: "sliding",
            nonbreaking_force_tab: true,
            link_title: false,
            default_link_target: "_blank",
            content_style: "body{font-size: 16px}",
            // 自定义 图片上传模式
            custom_images_upload: true,
            images_upload_url: "your_upload_api_url...",
            custom_images_upload_callback: (res) => res.url,
            custom_images_upload_param: { id: "xxxx01", age: 18 }
        })

        

        const closeDrawer=()=>{
            state.ctEditVisible = false
        }
        
        const updateContent=()=>{
            Http.updateSinglePage({id:2,content:state.eCtContent}).then(res=>{
                if(res) {
                    if(res.success) {
                        state.ctEditVisible = false;
                        messageTips(res.message,3);
                        getContent();
                    } else {
                        messageTips(res.message,1);
                    }
                }
            })
        }

        const getContent=()=>{
            Http.getSinglePageContent({id:2}).then(res=>{
                if(res) {
                    if(res.content) {
                        state.citangContent = res.content;
                        state.eCtContent = res.content;
                    }
                }
            })
        }

        onMounted(()=>{
            getContent();
        })

        return {
            ...toRefs(state),
            closeDrawer,
            edSetting,
            updateContent
        }
    }
})
</script>

<style>

</style>
<style lang="scss">
@import '@/scss/_variables.scss';
    .content {
        background:rgba($color: $primary-color, $alpha: 0.1);
        padding:20px;
        img {
            max-width: 100% ;
        }
    }
</style>